<template>
  <div>
    <nav-com title="登录" :showView="showView" @back="backHandler()"></nav-com>
    <div class="margin_box">
      <van-form @submit="onSubmit">
        <van-row class="padd_box">
          <van-col span="24">
            <div class="login_box" style="">
              <label>账号：</label>
              <input
                type="text"
                v-model="loginfrom.account"
                placeholder="请输入您的账号"
              />
            </div>
          </van-col>
        </van-row>
        <van-row class="padd_box">
          <van-col span="24">
            <div class="login_box" style="">
              <label>密码：</label>
              <input
                type="password"
                v-model="loginfrom.password"
                placeholder="请输入您的密码"
              />
            </div>
          </van-col>
        </van-row>
        <van-row>
          <van-col
            style="
              text-align: center;
              font-size: 4vw;
              color: red;
              margin-top: 2.6vw;
            "
            span="24"
          >
            {{ message }}
          </van-col>
        </van-row>
        <div style="display: flex; margin-top: 30px; font-size: 3.2vw">
          <van-checkbox checked-color="#FF491F" v-model="checkbox"
            >选择代表您已查阅并同意{{ base_name }}</van-checkbox
          ><span @click="agreementHanlder" style="color: #ff491f"
            >《用户协议》</span
          >
        </div>
        <van-row class="padd_box">
          <van-col span="24">
            <van-button
              style="font-size: 4.8vw; height: 13.33vw"
              color="#FF491F"
              type="info"
              native-type="submit"
              round
              block
              >登录</van-button
            >
          </van-col>
        </van-row>
        <div
          style="
            display: flex;
            height: 50px;
            align-items: center;
            font-size: 14px;
          "
        >
          <div style="flex: 1; display: flex">
            您还没有账号?
            <div
              @click="registerHandler"
              style="margin-left: 5px; color: #fe4b20; text-align: center"
            >
              去注册
            </div>
          </div>
          <div
            @click="forgotHandler"
            style="color: #fe4b20; text-align: center"
          >
            找回密码？
          </div>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import { postVerificationcodes, login } from "@/api/api";
import navCom from "@/component/nav";
export default {
  name: "login",
  components: {
    navCom,
  },
  data() {
    return {
      message: "",
      loginfrom: {
        account: "",
        password: "",
      },
      showView: false,
      disabled: false,
      codeText: "获取验证码",
      codeFalg: true,
      checkbox: false,
    };
  },
  mounted() {
    if (weixin.isAndroid()) {
      window.JS_TROOPS.clearCache();
    }
  },
  methods: {
    //返回
    backHandler() {
      this.$router.go(-1);
    },
    //
    agreementHanlder() {
      this.$router.push("/agreement");
    },
    //判断手机号
    cellphoneHanlder(val) {
      if (val == "" || val.trim().length == 0) {
        this.message = "手机号不能为空";
        return false;
      }
      let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (!reg.test(val)) {
        this.message = "手机号不正确";
        return false;
      } else {
        this.message = "";
        return true;
      }
    },
    //验证码
    verificationCodeHanlder(val) {
      let reg = /^\d{4,6}$/;
      if (val == "" || val.trim().length == 0) {
        this.message = "验证码不能为空";
        return false;
      } else if (!reg.test(val)) {
        this.message = "验证码不正确";
        return false;
      } else {
        this.message = "";
        return true;
      }
    },

    //保存
    onSubmit() {
      if (this.loginfrom.account == "") {
        this.message = "请输入用户名";
        return false;
      }
      if (this.loginfrom.password == "") {
        this.message = "请输入密码";
        return false;
      }
      if (!this.checkbox) {
        this.message = "用户需同意用户协议";
        return false;
      } else {
        this.message = "";
      }
      localStorage.setItem("5GloginMobile", this.loginfrom.account);

      login(this.loginfrom).then((res) => {
        if (res.data.code == 1) {
          localStorage.removeItem("shareUser");
          window.weixin.setItemToken(res.data.data.userinfo);
          if (weixin.isAndroid()) {
            window.JS_TROOPS.dealLogin();
          }
          this.$router.push("/index");
          localStorage.setItem("loginMobile", this.loginfrom.account);
          localStorage.setItem("user_id", res.data.data.userinfo.user_id);
          localStorage.setItem("token", res.data.data.userinfo.token);
        } else {
          if (res.data.msg == "referralCode must not be null") {
            this.$dialog
              .alert({
                message: "您还没有注册，现在去注册",
              })
              .then(() => {
                this.$router.push("/register");
              });
          } else {
            this.$dialog.alert({
              message: res.data.msg,
            });
            if (res.data.msg.indexOf("未注册") != -1) {
              this.$router.push("/register");
            }
          }
        }
      });
    },
    //去注册
    registerHandler() {
      this.$router.push("/register");
    },
    forgotHandler() {
      this.$router.push("/forgot");
    },
    //获取验证码
    codeHandler() {
      let that = this;
      let telLen = this.loginfrom.cellphone.length;
      if (telLen == 11) {
        let time = null;
        clearInterval(time);
        that.codeFalg = false;
        let t = 60;
        time = setInterval(function () {
          t--;
          that.codeText = t;
          if (t <= 0) {
            that.codeText = "获取验证码";
            that.codeFalg = true;
            clearInterval(time);
          }
        }, 1000);

        postVerificationcodes({
          mobile: this.loginfrom.cellphone,
          event: "mobilelogin",
        }).then((res) => {
          if (res.data.code == 200) {
          } else {
            this.$dialog.alert({
              message: res.data.msg,
            });
          }
        });

        return true;
      } else {
        this.message = "请输入正确手机号";
        return false;
      }
    },
  },
};
</script>
<style scoped>
.margin_box {
  margin-left: 10vw;
  margin-right: 10vw;
  margin-top: 11.2vw;
}
.padd_box {
  min-height: 10.66vw;
  margin-top: 3.4vw;
  border-radius: 1.333vw;
}
.ashBg {
  background: #fff;
  border-radius: 25px;
  border: 1px solid #e3e3e3;
  width: 100%;
}
.login_box {
  border: 1px solid #e3e3e3;
  font-size: 4.2vw;
  border-radius: 6.66vw;
  height: 13.3vw;
  line-height: 13.3vw;
}
.login_box label {
  padding-left: 5.3vw;
}
.login_box input {
  height: 11vw;
  line-height: 11vw;
  width: 50vw;
  border: none;
}
</style>
